<template>
  <div>
    <el-card class="home-box-card">
      <template #header>
        <div class="home-card-header">
          <span>
            <slot>{{ name }}</slot>
          </span>
        </div>
      </template>
        <p class="text item">
          <slot>{{ description }} </slot>
        </p>
      <template #footer>
        <div class="home-card-footer">
            <el-button>
              <slot>{{ btn_name }}</slot>
            </el-button>
        </div>
      </template>
    </el-card>
  </div>
</template>

<script setup lang="ts">

const props = defineProps({
  idx: {
    type: Number,
    required: true
  },
  name: {
    type: String,
    default: 'service name',
    required: true
  },
  description: {
    type: String,
    default: 'service description',
    required: true
  },
  btn_name: {
    type: String,
    default: '启动',
    required: true
  }
});

</script>

<style scoped>
.home-box-card {
  margin: auto auto;
  width: 200px;
}
</style>